import React from 'react'
import DataSource from 'components/data-source'
import { Button, Form } from "antd";
const FormItem = Form.Item;

let dataSourceTest1 = {
  url: '/api/users/v3/search',
  method: 'get',
  paging: true,
  params: {},
  searchParams: [{
    name: 'keyword',
    type: 'String',
    dataSource: null,
    label: '关键字'
  }],
  mainKey: 'userOID',
  keys: [
    { dataIndex: 'employeeID', title: '工号' },
    { dataIndex: 'fullName', title: '姓名' },
    { dataIndex: 'mobile', title: '手机号' },
    { dataIndex: 'departmentName', title: '部门名称' }
  ]
};

let dataSourceTest2 = {
  url: '/api/setOfBooks/by/tenant',
  method: 'get',
  params: {},
  searchParams: [],
  mainKey: 'id',
  keys: []
};


let dataSourceTest3 = {
  url: '/location-service/api/location/search',
  method: 'get',
  params: {},
  searchParams: [{
    name: 'keyWord',
    type: 'String',
    dataSource: null,
    label: '关键字'
  }],
  mainKey: 'code',
  keys: []
};

let dataSourceTest4 = {
  url: '/api/approvals/filters/get',
  method: 'post',
  params: { entityType: 1002, searchCorporations: [] },
  searchParams: [{
    name: 'formOIDs',
    type: 'DataSource',
    dataSource: {
      url: '/api/custom/forms/finance/all',
      method: 'get',
      params: { showCompany: true, formType: 1002 },
      searchParams: [],
      mainKey: 'formOID',
      keys: []
    },
    labelKey: 'formName',
    descriptionKey: 'companyName',
    label: '单据类型'
  }, {
    name: 'userOID',
    type: 'DataSource',
    dataSource: {
      url: '/api/users/v3/search',
      method: 'get',
      params: { size: 9999 },
      searchParams: [{
        name: 'userOID',
        type: 'String',
        dataSource: null,
        label: 'fullName'
      }],
      mainKey: 'userOID',
      keys: []
    },
    labelKey: 'fullName',
    single: true,
    label: '申请人姓名/工号'
  }, {
    name: 'businessCode',
    type: 'DataSource',
    dataSource: {
      url: '/api/expense/report/loanApplication/search',
      method: 'get',
      params: { entityType: 1002 },
      searchParams: [{
        name: 'keyword',
        type: 'String',
        dataSource: null,
        label: '单据ID'
      }],
      mainKey: '_self',
      keys: []
    },
    labelKey: '_self',
    single: true,
    label: '单据ID'
  }, {
    name: 'departmentOIDs',
    type: 'DataSource',
    dataSource: {
      url: '/api/DepartmentGroup/selectDept/enabled',
      method: 'get',
      paging: true,
      params: {},
      searchParams: [{
        name: 'deptCode',
        type: 'String',
        dataSource: null,
        label: '部门编码',
        defaultValue: ''
      }, {
        name: 'name',
        type: 'String',
        dataSource: null,
        label: '部门名称',
        defaultValue: ''
      }],
      mainKey: 'departmentOid',
      keys: [
        { dataIndex: 'departmentCode', title: '部门编码' },
        { dataIndex: 'path', title: '部门名称' }
      ]
    },
    labelKey: 'name',
    label: '部门'
  }, {
    name: 'beginDate,endDate',
    type: 'DateRange',
    dataSource: null,
    label: '提交日期从,提交日期至'
  }],
  mainKey: 'id',
  keys: [
    { dataIndex: 'employeeID', title: '工号' },
    { dataIndex: 'applicant', title: '申请人' },
    { dataIndex: 'lastSubmittedDate', title: '提交日期', sorter: true },
    { dataIndex: 'formName', title: '单据类型', sorter: true },
    { dataIndex: 'businessCode', title: '单号', sorter: true },
    { dataIndex: 'totalAmount', title: '总金额', sorter: true },
    { dataIndex: 'currencyCode', title: '币种' }
  ]
};

export default {
  key: 'data-source',
  name: 'DataSource 数据源',
  author: '张然',
  description: '数据源是接收一个数据源对象从而渲染不同组件的中间组件。',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [{
        param: 'type', description: '::table::、::select::、::page::中的一种。', type: 'string', defaultValue: '-'
      }, {
        param: 'source', description: '要设定的数据源。', type: 'DataSource', defaultValue: '-'
      }, {
        param: 'tableOption', description: '内部::Table::需要的额外参数。', type: 'tableConfig', defaultValue: '-'
      }, {
        param: 'selectOption', description: '内部::Select::需要的额外参数，见下方::selectOption::。', type: 'selectOption', defaultValue: '-'
      }, {
        param: 'pageOption', description: '内部::Page::需要的额外参数，见下方::pageOption::。', type: 'pageOption', defaultValue: '-'
      }],
      description: ''
    },
    {
      title: 'selectOption',
      data: [{
        param: 'title', description: '内部弹窗组件的标题。', type: 'string', defaultValue: '-'
      }, {
        param: 'labelKey', description: '内部显示值的渲染规则或字段。', type: 'string|function', defaultValue: '-'
      }, {
        param: 'single', description: '是否单选。', type: 'boolean', defaultValue: '-'
      }],
      description: ''
    },
    {
      title: 'pageOption',
      data: [{
        param: 'buttons', description: '表格上方的按钮数组，详见下方buttonConfig。', type: 'array', defaultValue: '-'
      }],
      description: ''
    },
    {
      title: 'buttonConfig',
      data: [{
        param: 'type', description: '按钮的::type::。', type: 'string', defaultValue: '-'
      }, {
        param: 'text', description: '按钮内部的文字。', type: 'string', defaultValue: '-'
      }, {
        param: 'onClick', description: '按钮点击事件。', type: 'function', defaultValue: '-'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '表格展示',
      description: '当::type::为::table::时展示为表格。',
      state: {
      },
      getMethod: context => {
        return {
        }
      },
      getContent: context => {
        return (
          <DataSource source={dataSourceTest1}
                      id="data-source-1"
                      type="table"/>
        )
      }
    }, {
      title: '表格自定义',
      description: '可以传入::tableOption::进行表格属性的自定义。',
      state: (context) => ({
        columns: [{
          dataIndex: 'employeeID', render: employeeID => `工号-${employeeID}`, width: '40%'
        }, {
          title: '操作', dataIndex: 'operation', width: '10%',
          render: (text, record) => (
            <a onClick={() => context.handleClickInfo(record)}>
              信息
            </a>
          ),
        }],
      }),
      getMethod: context => {
        return {
          handleClickInfo: record => {
            console.log(`You clicked ${record.fullName}`);
          }
        }
      },
      getContent: context => {
        const { columns } = context.state;
        return (
          <DataSource source={dataSourceTest1}
                      tableOption={{ columns }}
                      id="data-source-2"
                      type="table"/>
        )
      }
    }, {
      title: '选择框展示',
      description: '当::type::为::select::时展示为选择框。',
      state: {
      },
      getMethod: context => {
        return {
        }
      },
      getContent: context => {
        return (
          <DataSource source={dataSourceTest1}
                      id="data-source-2"
                      type="select"
                      selectOption={{ title: '选择人员', labelKey: 'fullName' }}/>
        )
      }
    }, {
      title: '表单测试',
      description: '兼容::antd::表单。',
      state: {
      },
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='人员' style={{ marginBottom: 12 }}>
              {getFieldDecorator('user', {
                rules: [{
                  required: true,
                  message: '请选择'
                }]
              })(
                <DataSource source={dataSourceTest1}
                            id="data-source-3"
                            type="select"
                            selectOption={{ title: '选择人员', labelKey: 'fullName' }}/>
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    }, {
      title: '选择框展示',
      description: '当::type::为::select::时展示为选择框。',
      state: {
      },
      getMethod: context => {
        return {
        }
      },
      getContent: context => {
        return (
          <DataSource source={dataSourceTest2}
                      id="data-source-4"
                      type="select"
                      selectOption={{ labelKey: 'setOfBooksName', title: '选择账套' }}/>
        )
      }
    }, {
      title: '选择框展示',
      description: '当::single::为::true::时展示为单选框。',
      state: {
      },
      getMethod: context => {
        return {
        }
      },
      getContent: context => {
        return (
          <DataSource source={dataSourceTest2}
                      id="data-source-4"
                      type="select"
                      selectOption={{ single: true, labelKey: 'setOfBooksName' }}/>
        )
      }
    }, {
      title: '选择框展示',
      description: '当::type::为::select::时且带搜索的选择框。',
      state: {
      },
      getMethod: context => {
        return {
        }
      },
      getContent: context => {
        return (
          <DataSource source={dataSourceTest3}
                      id="data-source-5"
                      type="select"
                      selectOption={{ single: true, labelKey: 'vendorAlias' }}/>
        )
      }
    }, {
      title: '表单测试',
      description: '兼容::antd::表单。',
      state: {
      },
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='地址' style={{ marginBottom: 12 }}>
              {getFieldDecorator('location', {
                rules: [{
                  required: true,
                  message: '请选择'
                }]
              })(
                <DataSource source={dataSourceTest3}
                            id="data-source-6"
                            type="select"
                            selectOption={{ single: true, labelKey: 'vendorAlias' }}/>
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    }, {
      title: '页面展示',
      description: '当::type::为::page::时展示为页面。',
      state: context => ({
        columns: [{
          dataIndex: 'operation', title: '操作',
          render: (text, record) => <a onClick={e => console.log('clicked print')}>打印</a>
        }],
        buttons: [{
          type: 'primary', text: '导出搜索数据', onClick: context.handleClickExport
        }, {
          text: '生成批次', onClick: e => console.log('clicked create')
        }],
        selectedRowKeys: []
      }),
      getMethod: context => {
        return {
          handleClickExport: e => {
            const {} = context.state;
            console.log(selectedRowKeys);
          },
          handleChangeSelection: (selectedRowKeys, selectedRows) => {
            context.setState({ selectedRowKeys })
          }
        }
      },
      getContent: context => {
        const { columns, buttons, selectedRowKeys } = context.state;
        return (
          <DataSource source={dataSourceTest4}
                      id="data-source-7"
                      tableOption={{
                        columns,
                        rowSelection: {
                          selectedRowKeys,
                          onChange: context.handleChangeSelection
                        }
                      }}
                      pageOption={{ buttons }}
                      type="page"/>
        )
      }
    }
  ]
}
